import React, { useState } from 'react';
import { Paper, TextField } from '@material-ui/core';
const SearchBar = ({ onSubmit }) => {
    const [searchTerm, setSearchTerm] = useState('');
    /**
     * 这里可以添加防抖
     */
    const handleChange = (event) => {
        setSearchTerm(event.target.value)
    }
    const onKeyPress = (event) => {
        if (event.key === "Enter") {
            onSubmit(searchTerm);
        }
    }

    return (
        <Paper elevation={6} style={{
            padding: '25px', display: 'flex', top: 0, alignItems: 'center',
            position: 'fixed',
            left: 0,
            width:'90%',
            zIndex: 180
        }}>
            <TextField fullWidth label="Search..." value={searchTerm} onChange={handleChange} onKeyPress={onKeyPress} />
        </Paper>
    )

}
export default SearchBar;